<script>
import draggable from "vuedraggable";
import { copy, isNull } from "@/utils/service";
import TbColumn from "@/components/table/tbColumn";

export default {
  name: "columnManager",
  components: {
    draggable
  },
  props: {
    columns: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      localColumns: [],
      drag: false,
      visible: false,
    };
  },
  methods: {
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },
    show() {
      this.localColumns = TbColumn.buildArray(this.columns.filter(item => item.show));
    },
    // 限定部分字段不能拖动
    isDraggable(item) {
      return !item.dragAble || !isNull(item.fixed) ? "unDragAble" : "";
    },
    refreshColumns(){
      this.visible = false;
      this.$emit('refreshColumns',this.localColumns);
    }
  }
};
</script>

<template>
  <div style="display: inline-block">
    <el-popover
      @show="show"
      placement="bottom-start"
      trigger="click"
      v-model="visible"
    >
      <div>
        <span>可上下拖动重排顺序~</span>
        <draggable filter=".unDragAble" v-model="localColumns" chosen-class="chosen" force-fallback="true"
                   group="people" animation="1000"
                   @start="onStart" @end="onEnd">
          <div :class="isDraggable(item)" v-for="(item,index) in localColumns" :key="index">
            <el-checkbox v-model="item.enabled">{{ item.label }}</el-checkbox>
          </div>
        </draggable>
        <el-button type="primary" size="mini" @click="refreshColumns"
                   style="width: 100%;margin-top: 5px">确定
        </el-button>
      </div>
      <el-button slot="reference" size="mini" type="primary" icon="el-icon-sort">列管理</el-button>
    </el-popover>

  </div>
</template>

<style scoped>
</style>